import React, {Component} from 'react';
import { Button, Table, Input, Row, Col } from 'antd';
import BreadcrumbBar from '@/common/BreadcrumbBar';//面包屑组件
import ToolBar from '@/common/ToolBar';//操作栏组件

class Dict extends Component {
	constructor(props) {
		super(props);	
		this.state = {
			dataSource: [
				{
					id: '1',
					topic: '区域代码',
					code: 2,
					text: '华北',
					type: 'string'
				}
			]
		}

		this.columns = [
	    	{title: 'id', dataIndex: 'id', key: 'id'},
	    	{title: 'topic', dataIndex: 'topic', key:'topic'},
	    	{title: 'code', dataIndex: 'code', key: 'code'},
	    	{title: 'text', dataIndex: 'text', key: 'text'},
	    	{title: 'type', dataIndex: 'type', key: 'type'},
			{title: '操作', dataIndex: 'operator',key: 'operator',
				render:(text, record, index)=>{
	    		return (
					<div>
						<Button>编辑</Button>&nbsp;
						<Button type="danger">删除</Button>
					</div>
				)
	    	}}
	    ]
	}
    render() {
        return (
            <div>
		   		<BreadcrumbBar one="系统管理" two="数据字典"/>
				<ToolBar>
					<Button>创建</Button>&emsp;
					<Button type="danger">删除</Button>
				</ToolBar>
				<Row>
					<Col span={3} style={{padding:'0px 10px 10px 0px'}}>
						<div style={{background:'#fff'}}>
							<ul>
								<li style={Object.assign(style.active, style.li)}>区域代码</li>
								<li style={style.li}>省份代码</li>
								<li style={style.li}>人员关系</li>
							</ul>
						</div>
					</Col>
					<Col span={21}>
						<Table 
							dataSource={this.state.dataSource} 
							rowKey={record => record.id}
							columns={this.columns} 
							loading={false}
							pagination={{
								showTotal:(total, range) => `共 ${total} 条  显示  ${range[0]}-${range[1]} 条`
							}}
							bordered={true} 
						/>
					</Col>
				</Row>
		   </div>
        )

    }
}

export default Dict;

const style={
	li:{
		lineHeight:'40px',
		padding:'0px 0px 0px 10px',
	},
	liDiv:{
    	padding:'0px 10px',
//  	borderBottom: '1px #f1f1f1 solid',
    	cursor: 'pointer',
    	backgroundColor:'#fff'
    	
	},
	active:{
		color:'#44cdfd',
		backgroundColor:'#ecf6fd'
	}
}